import { useState, useEffect } from 'react';
import { ImageBackground,FlatList, StyleSheet, TouchableOpacity, Text, View, Image,ToastAndroid} from 'react-native';
import { AntDesign} from '@expo/vector-icons';
import { useAuth } from '../context/AuthProvider';

const Shop = ({navigation}) => {
    const {user} = useAuth();
    const [page, setPage] = useState(1);
    const [list, setList] = useState([]);
    const [refreshing, setRefreshing] = useState(false);
    
    useEffect((shopState)=>{
        navigation.setOptions({
            title:'购物车',
            headerBackVisible: false,
            })
        fetch('http://10.7.89.96:3000/shopList',{
            method:'POST',
            body:JSON.stringify({
                shopState:shopState,
                userName:user.userName
            })
        })
        .then(res=>res.json())
        .then(res =>{
            setRefreshing(false)
                if (page == 1) {
                    setList(res.List)
                } else {
                    setList([...list, ...res.data.content])
                }
        })
    },[page])

    const onEnd = () => {
      setPage(page + 1)
    }
    const onRefresh = () => {
      setRefreshing(true);
      setPage(1);
    }
    const DeleteBtn =(shopId)=>{
        fetch('http://10.7.89.96:3000/shopDelete',{
            method:"POST",
            body:JSON.stringify({
                shopId:shopId,
            })
        })
        .then(res=>res.json())
        .then(res=>{
                if (res.code == 200) {
                    alert("删除成功");
                    setList(res.List)
                } else {
                    setList([...list, ...res.data.content])
                    ToastAndroid.show("删除失败",ToastAndroid.SHORT);
                }
        })
    }
    const ToSubmitOrder = (shopId,shopState,shopName) => {
        navigation.navigate('SubmitOrder',{id:shopId,state:shopState,shopName:shopName})
    }
    const renderItem = ({ item }) =>(
        <View style={styles.newsItem}>
            {/* 出租人头像、用户名等信息 */}
            <View style={{flexDirection: 'row',marginHorizontal: 10,}}>
                <View>
                    <Image    
                        style={{width:30,height:30}}
                        source={{
                            uri:item.avatarUrl
                        }}
                    />
                </View>
                <View style={styles.typeView}>
                    <Text style={styles.type}>{item.shopName}</Text>
                </View>
                <View style={styles.delete1}>
                    <View style={styles.delete2} >
                        <AntDesign name="delete" size={24} color="black" onPress={()=>DeleteBtn(item.shopId)}/>
                    </View>
                </View>
            </View>
            {/* 出租人物品信息 */}
            <View style={styles.item}>
                <View style={styles.itemImg}>
                    <Image    
                        style={{width:80,height:80,}}
                        source={{
                            uri:item.shopImage
                        }}
                    />
                </View>
                <View style={styles.itemText}>
                    <Text style={{marginTop:10,}}>{item.shopText}</Text>
                    <Text style={{marginTop:10,}}>押金￥{item.shopDeposit}</Text>
                    <Text style={styles.pricetext}>单价￥{item.shopPrice}</Text>
                    <TouchableOpacity  style={[styles.uploadBtnStyle]} >
                            <Text style={styles.uploadText} onPress={()=>ToSubmitOrder(item.shopId,item.shopState,item.shopName)}>提交订单</Text>
                    </TouchableOpacity>
                </View>
            </View>
        </View>
    )

    return (
        <View style={styles.container}>
            <ImageBackground source={require('../img/bgimg.jpg')} style={styles.bgimg}>
            <FlatList
                ListEmptyComponent={<Text>暂无数据</Text>}
                onRefresh={onRefresh}
                refreshing={refreshing}
                data={list}
                renderItem={renderItem}
                onEndReached={onEnd}
                keyExtractor={item => item.id}
            />
            </ImageBackground>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    bgimg:{
        flex: 1,
        resizeMode: "cover",
        justifyContent: "center"
    },
    newsItem: {
        paddingVertical: 10,
        borderBottomColor: '#ccc',
        borderBottomWidth: 1,
    },
    typeView: {
        marginRight: 20,
        paddingHorizontal: 5,
        borderRadius: 3
    },
    delete1:{
        flex: 1,
    },
    delete2:{
        alignSelf:'flex-end',
    },
    uploadBtnStyle: {
        marginLeft: 'auto',
        marginTop:5,
        height: 35,
        width: 70,
        backgroundColor: 'white',
        justifyContent: 'center', 
    },
    uploadText: {
        textAlign: 'center',
        color: 'white',
        textAlignVertical: 'center',
        borderWidth: 1,
        borderColor:'#cacaca' ,
        fontSize:15,
        height: 30,
        borderRadius: 5,
        backgroundColor:'orange'
    },
    item:{
        marginTop:5,
        backgroundColor:"white",
        height:100,
        opacity:0.8,
    },
    itemImg:{
        borderWidth: 1,
        width:80,
        height:80,
        marginLeft:15,
        marginTop:10,
    },
    itemText:{
        width:290,
        height:80,
        marginLeft:115,
        marginTop:-80,
    },
    pricetext:{
        marginLeft:'auto',
        marginTop:-40,
        fontSize:17,
        color:'red',
    },
});

export default Shop; 
